<template>
  <div class="app-container">
    <div class="order-details">
      <h2>订单信息</h2>
      <!-- 赏金补充、发起者接口不完善 -->
      <!-- 订单状态 -->
      <section class="order clearfix">
        <h3>订单状态</h3>
        <div class="order-status">
          <span class="order-id"
            >订单编号：<i>{{ formData.id }}</i></span
          >
          <el-button
            @click="confirm"
            class="status-btn"
            :type="status | statusFilter"
            >{{ status }}</el-button
          >
        </div>
        <div class="order-otherinfo">
          <ul>
            <li class="pay-method">
              付款方式：<span>{{ formData.pay_way }}</span>
            </li>
            <li class="pay-id">
              订单号：<span>{{ formData.order_id }}</span>
            </li>
            <li class="pay-time">
              付款时间：<span>{{ formData.pay_time }}</span>
            </li>
          </ul>
        </div>
      </section>

      <!-- 商品信息 -->
      <section class="item-info clearfix">
        <h3>商品信息</h3>
        <div class="item-hd">
          <a href="javascript:;" class="item-name">{{ formData.goods_name }}</a>
          <span
            >型号：<i class="item-type">{{ formData.goods_type }}</i></span
          >
          <span class="item-count">数量：{{ formData.goods_number }}</span>
          <span class="item-price">单价：{{ formData.single_price }}</span>
        </div>
        <div class="item-bd">
          <ul>
            <li>
              最晚时间：
              <span class="latest-time">{{ formData.end_date }}</span>
            </li>
            <li>
              购买方式：
              <span class="purchase-route">{{ formData.buy_way }}</span>
            </li>
            <li>
              备注：
              <p>
                {{ formData.note }}
              </p>
            </li>
          </ul>
          <div class="total-price">
            总金额：<span>￥{{ formData.total_price }}</span>
          </div>
        </div>
      </section>
      <!-- 顾客商家 -->
      <section class="both-sides">
        <h3>顾客商家</h3>
        <div class="customer">
          <div class="customer-info">发起者信息</div>
          <span
            >发起者：<a href="javascript:;" class="name">{{
              formData.buyer_name
            }}</a></span
          >
        </div>
        <div class="agent">
          <div class="agent-info">接单者信息</div>
          <span>接单者：<a href="javascript:;" class="name">李四</a></span>
        </div>
      </section>
      <!-- 配送信息 -->
      <section class="delivery">
        <h3>物流信息</h3>
        <div class="consignee-info">
          <span>收货人信息</span>
          <ul>
            <li>收货人：<strong>社会主义接班人</strong></li>
            <li>地址：<strong>重庆市南岸区崇文路2号重庆邮电大学</strong></li>
            <li>手机号码：<strong>18866668888</strong></li>
          </ul>
        </div>
        <div class="logistics-info">
          配送信息
          <p>
            <span>顺丰速运</span>
            <span>物流编号：SF1234567891011</span>
          </p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import "@/styles/mixin.scss";
import "@/styles/common.css";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        待付款: "info",
        待确认: "danger",
        已付款: "warning",
        未发货: "primary",
        已发货: "primary",
        已完成: "success"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      status: "待确认",
      orderId: 0, // 订单号
      formData: {} // 对应的id JSON
    };
  },
  created() {
    this.orderId = this.$route.params.orderId;
    this.fetchData();
  },
  methods: {
    confirm() {
      console.log(this.$route.params.orderId);
    },
    fetchData() {
      console.log("fetch", this.orderId);
      this.$http("getAllOrderList").then(res => {
        res.data.data.forEach(ele => {
          if (ele.id == this.orderId) {
            this.formData = ele;
          }
        });
      });
    }
  },
  computed: {},
  watch: {}
};
</script>

<style scoped>
h2 {
  margin: 5px 0 15px;
}
h3 {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
  font-size: 18px;
}

/* 订单状态 */
.order-status,
.order-otherinfo {
  float: left;
}

/* 订单状态左侧 */
.order-status {
  padding: 12px;
  border-right: 1px solid #ececec;
}
.order-id {
  display: block;
  padding: 12px;
}
.order-id i {
  font-style: normal;
  font-weight: 700;
  color: #409eff;
}
.status-btn {
  margin: 10px 8px;
  font-size: 18px;
  text-align: center;
}

/* 订单状态右侧 */
.order-otherinfo li {
  margin-bottom: 5px;
  padding: 3px 0;
}

/* 商品信息 */
/* 商品信息上侧 */
.item-hd {
  padding: 12px 16px;
}
.item-name {
  display: block;
  margin-bottom: 8px;
}
.item-name:hover {
  color: #409eff;
}

.item-hd span {
  color: #acacac;
  margin-right: 40px;
}
.item-type {
  font-style: normal;
}
/* 商品信息下侧 */
.item-bd ul {
  margin-top: 12px;
  padding-left: 20px;
}
.item-bd li {
  margin-bottom: 8px;
}
.item-bd li p {
  margin: 6px 0 0;
  padding-right: 20px;
  text-indent: 1.5em;
}
.item-bd .total-price {
  float: right;
  margin: 0 30px;
  padding-bottom: 14px;
}

/* 顾客商家 */
.customer,
.agent {
  padding: 12px 20px;
}
.customer-info,
.agent-info {
  font-size: 18px;
}
.customer span,
.agent span {
  display: block;
  margin-top: 8px;
  text-indent: 2em;
}
.both-sides .name {
  font-style: normal;
}
.both-sides .name:hover {
  color: #409eff;
}
.customer {
  border-bottom: 1px solid #ececec;
}

/* 物流信息 */
/* 收货人信息 */
.delivery {
  margin-bottom: 400px;
}

.consignee-info {
  padding: 12px 20px;
  border-bottom: 1px solid #ececec;
}
.consignee-info ul {
  margin-top: 12px;
  padding-left: 20px;
}
.consignee-info ul li {
  margin-bottom: 6px;
}
/* 配送信息 */
.logistics-info {
  padding: 12px 20px;
}
.logistics-info p {
  margin: 8px 20px;
}
.logistics-info p span {
  margin-right: 20px;
}
</style>
